:root {
  --brand-color: #509ee3;
  --brand-light-color: #cde3f8;
  --brand-saturated-color: #2d86d4;

  --base-grey: #f8f9fa;
  --grey-5percent: color(var(--base-grey) shade(5%));
  --grey-1: color(var(--base-grey) shade(10%));
  --grey-2: color(var(--base-grey) shade(20%));
  --grey-3: color(var(--base-grey) shade(30%));
  --grey-4: color(var(--base-grey) shade(40%));
  --grey-5: color(var(--base-grey) shade(50%));

  --grey-text-color: #797979;
  --alt-color: #f5f7f9;
  --alt-bg-color: #f4f6f8;

  --success-color: #9cc177;
  --headsup-color: #f5a623;

  --gold-color: #f9d45c;
  --orange-color: #f9a354;
  --purple-color: #a989c5;
  --green-color: #9cc177;
  --green-saturated-color: #90bd64;
  --dark-color: #4c545b;
  --slate-color: #9ba5b1;
  --slate-light-color: #dfe8ea;
  --slate-almost-extra-light-color: #edf2f5;
  --slate-extra-light-color: #f9fbfc;

  --error-color: #e35050;
}

.text-default,
:local(.text-default) {
  color: var(--default-font-color);
}

.text-default-hover:hover {
  color: var(--default-font-color);
}

/* brand */
.text-brand,
:local(.text-brand),
.text-brand-hover:hover,
:local(.text-brand-hover):hover {
  color: var(--brand-color);
}

.text-brand-darken,
.text-brand-darken-hover:hover {
  color: color(var(--brand-color) shade(20%));
}

.text-brand-light,
:local(.text-brand-light),
.text-brand-light-hover:hover,
:local(.text-brand-light-hover):hover {
  color: var(--brand-light-color);
}

.bg-brand,
.bg-brand-hover:hover,
.bg-brand-active:active {
  background-color: var(--brand-color);
}

@media screen and (--breakpoint-min-md) {
  .md-bg-brand {
    background-color: var(--brand-color) !important;
  }
}

/* success */

.text-success {
  color: var(--success-color);
}
.bg-success {
  background-color: var(--success-color);
}

/* error */

.text-error,
:local(.text-error),
.text-error-hover:hover {
  color: var(--error-color);
}

.bg-error,
.bg-error-hover:hover {
  background-color: var(--error-color);
}
.bg-error-input {
  background-color: #fce8e8;
}

/* favorite */
.text-gold,
.text-gold-hover:hover {
  color: var(--gold-color);
}

.text-purple,
.text-purple-hover:hover {
  color: var(--purple-color);
}

.text-green,
.text-green-hover:hover {
  color: var(--green-color);
}

.text-green-saturated,
.text-green-saturated-hover:hover {
  color: var(--green-saturated-color);
}

.text-orange,
.text-orange-hover:hover {
  color: var(--orange-color);
}

.text-slate {
  color: var(--slate-color);
}
.text-slate-light {
  color: var(--slate-light-color);
}
.text-slate-extra-light {
  background-color: var(--slate-extra-light-color);
}

.bg-gold {
  background-color: var(--gold-color);
}

.bg-purple,
.bg-purple-hover:hover {
  background-color: var(--purple-color);
}

.bg-green {
  background-color: var(--green-color);
}
.bg-green-saturated,
.bg-green-saturated-hover:hover {
  background-color: var(--green-saturated-color);
}

/* alt */
.bg-alt,
.bg-alt-hover:hover {
  background-color: var(--alt-color);
}

/* grey */
.text-grey-1,
:local(.text-grey-1),
.text-grey-1-hover:hover {
  color: var(--grey-1);
}

.text-grey-2,
:local(.text-grey-2),
.text-grey-2-hover:hover {
  color: var(--grey-2);
}

.text-grey-3,
:local(.text-grey-3),
.text-grey-3-hover:hover {
  color: var(--grey-3);
}

.text-grey-4,
.text-grey-4-hover:hover {
  color: var(--grey-4);
}

.text-grey-5,
.text-grey-5-hover:hover {
  color: var(--grey-5);
}

.bg-grey-0,
.bg-grey-0-hover:hover {
  background-color: var(--base-grey);
}
.bg-grey-05 {
  background-color: var(--grey-5percent);
}
.bg-grey-1 {
  background-color: var(--grey-1);
}
.bg-grey-2 {
  background-color: var(--grey-2);
}
.bg-grey-3 {
  background-color: var(--grey-3);
}
.bg-grey-4 {
  background-color: var(--grey-4);
}
.bg-grey-5 {
  background-color: var(--grey-5);
}

.bg-slate {
  background-color: var(--slate-color);
}
.bg-slate-light {
  background-color: var(--slate-light-color);
}
.bg-slate-almost-extra-light {
  background-color: var(--slate-almost-extra-light-color);
}
.bg-slate-extra-light {
  background-color: var(--slate-extra-light-color);
}
.bg-slate-extra-light-hover:hover {
  background-color: var(--slate-extra-light-color);
}

.text-dark,
:local(.text-dark) {
  color: var(--dark-color);
}

/* white  - move to bottom for specificity since its often used on hovers, etc */
.text-white,
:local(.text-white),
.text-white-hover:hover {
  color: #fff;
}

@media screen and (--breakpoint-min-md) {
  .md-text-white {
    color: #fff;
  }
}

/* common pattern, background brand, text white when hovering or selected */
.brand-hover:hover {
  color: #fff;
  background-color: var(--brand-color);
}
.brand-hover:hover * {
  color: #fff;
}

.bg-white,
:local(.bg-white) {
  background-color: #fff;
}

.bg-light-blue {
  background-color: #f5fafc;
}

.bg-light-blue-hover:hover {
  background-color: #e4f0fa;
}

.text-light-blue,
.text-light-blue-hover:hover {
  color: #cfe4f5;
}
.text-slate {
  color: #606e7b;
}

.bg-transparent {
  background-color: transparent;
}
